
import React, { useState } from 'react'

export default function App() {
  // 1、 声明多个状态：调用userState多次，得到多个状态
  const [ count, setCount ] = useState(0)
  const [msg, setMsg] = useState("")

  // 2、useState可以创建任意类型的状态
  // 2.1 声明数组
  const [list, setList] = useState([1,2,3])
  // 2.2 声明对象
  const [obj, setObj] = useState({name:"小明",age:18})
  // 2.3 声明jsx， 一般不会这么写
  const [jsx, setJsx] = useState(<h1>我是jsx</h1> )


  return (
    <div>
      {list.map(item => {return <h1>{item}</h1>})}
      count -- { count }
      <hr />
      msg -- { msg}
      <hr />
      <h2>
        {obj.name} -- {obj.age}
      </h2>
      
      <button onClick={()=> setCount(count+1)}>点击改变count</button>
      <br />
      <button onClick={()=> setMsg(msg+"~")}>点击改变msg</button>
    </div>
  )
}
